<template>
  <div class="contain">
    <ul>
      <li>订单号: 5243370454877475015</li>
      <li>收件人: {{this.payobj.name}}[{{this.payobj.tel}}]</li>
      <li>地址: {{this.payobj.province}},{{this.payobj.city}},{{this.payobj.county}},{{this.payobj.addressDetail}}</li>
      <li>总件数：{{selectnum}}</li>
      <li>总额： ￥{{price}}</li>
    </ul>
    <div class="zhifu_1">
      <div class="zhifu"></div>
      <div class="yuandian"></div>
    </div>
  </div>
</template>
<style scoped>
.yuandian {
  position: absolute;
  width: 18px;
  height: 18px;
  border: none;
  top: 20px;
  right: 15px;
  background: #ccc;
  border-radius: 50%;
}
.zhifu_1 {
  padding: 10px 10px;
  position: relative;
}
.zhifu {
  width: 276px;
  height: 38px;
  background-image: url(https://img.fishfay.com/theme/images/antacn/icons/wechatpay-02.png);
  background-repeat: no-repeat;
  background-size: auto 30px;
  background-position: left center;
}
ul {
  padding: 0 10px;
}
ul li {
  font-size: 14px;
  color: #333;
  line-height: 28px;
}
.contain {
  margin-top: 54px;
}
</style>
<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  computed: {
    ...mapState("address", { addressid: state => state.addressid }),
    ...mapState("pay", { payobj: state => state.payobj }),

    ...mapGetters({
      price: "shoppingcar/price",
      selectnum: "shoppingcar/selectnum"
    })
  },
  methods: {
    ...mapActions("pay", ["innitpayobj"])
  },
  created() {
    this.innitpayobj(this.addressid);
    console.log(this.payobj);
  }
};
</script>
